/* eslint-disable react/react-in-jsx-scope */
import classnames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import Icon from '../Icon'
import styles from './index.module.scss'
/**
 * 测试用例
 *   <Image src="xxxx" className="xxxx" />
 * 拥有懒加载特性的图片组件
 * @param {String} props.src 图片地址
 * @param {String} props.className 样式类
 */
type Props = {
  src: string,
  className?: string
}
const Image = ({ src, className }:Props) => {
  // 对图片元素的引用
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = useState(false)
  const imgRef = useRef<HTMLImageElement>(null)
  useEffect(() => {
    // 1.创建IntersectionObserver对象
    const ob = new IntersectionObserver((entry) => {
      console.log(entry[0].isIntersecting)
      if (entry[0].isIntersecting) {
        // 图片可见
        if (imgRef.current) {
          imgRef.current.src = src
          setIsLoading(true) // 浏览器去请求图片了
        }
        ob.unobserve(imgRef.current!)
      }
    })
    // 2.观察img
    ob.observe(imgRef.current!)
  }, [])

  return (
    <div className={classnames(styles.root, className)}>

      {/* 情况1：正在加载时显示的内容 */}
      {
        isLoading && <div className="image-icon">
          <Icon type="iconphoto" />
        </div>
      }

      {/* 情况2：加载出错时显示的内容 */}
      {
        isError && <div className="image-icon">
          <Icon type="iconphoto-fail" />
        </div>
      }

      {/* 情况3：加载成功时显示的内容 */}
      {<img
        onError={() => { setIsError(true) }}
        onLoad={() => { setIsLoading(false); console.log('图片加载完成') }} alt="" data-src={src} ref={imgRef} />}
    </div>
  )
}
export default Image
